<template>
    <div id="classright">
        <ul>
            <li v-for="itme in suju1" :key="itme.id"
            @myfun = 'my'
            
            >
                <img :src="itme.img" alt="">
                <p>{{itme.introduce}}</p>
            </li>
        </ul>

    </div>
</template>
<script>
export default {
    name:'ClassRight',
    
    data(){
        return{
            suju:[],
            suju1 :[],
            suju2:[],
            suju3:[],
            suju4:[],
            suju5:[]

        }
    },

   created(){
        this.axios.get('data/mall.json').then(res => {
        //   this.suju1 =   (res.data).filter(re =>{
        //           return re.attribute == '衣服'
        //       })
        this.suju = res.data
        })
       

    },
    methods:{
        my(){
            this.$on('myfun',(index,suju) =>{
                 console.log(suju)
                if(index == 0){
                    this.suju1  = suju.filter(re => {
                        return re.attribute == '衣服'
                       
                    })
                }

            })

        }
    }
    
}
</script>
<style scoped>
#classright{
    width: 300px;
    height: 100%;
    /* background-color: rgb(151, 23, 23); */
    position:relative;
    left: 150px;
    top: 50px;
}
ul{
    display: flex;
    align-items: center;
    flex-direction: column;
}
li{
margin-bottom: 10px;
}
p{
    width: 200px;
     overflow: hidden;    
    text-overflow:ellipsis;    
    white-space: nowrap;
}
</style>